<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局和float属性</title>
<style type="text/css">
.box1{height:50px ;background: red; float: left;}
.box2{height:50px ;background: blue; float: right;}
</style>
</head>
<!--如果box1没有内容 知己设置 float属性 将导致box1缩成一个原点, 如果设置了浮动 ，紧挨着右边滴元素会受到影响 -->
<body>
<p>如果box1没有内容 知己设置 fl</p>
  <div class="box1">呵呵哈哈哈或</div>
  <div class="box2">果box1没有内容 知己设置 知</div>
  
  <div>如果box1没有内容 知己设置 fl如果box1没有内容 知己设置f</div>
</body>
</html>